

<template>
  <!-- setup创建的响应式对象,模板中结构了,不需要加 value -->
  <p>count:{{ count }}--<button @click="count++">count++</button></p>
  <p><button @click="add">count+1</button></p>
  <!-- 复杂数据类型 -->
  <p>{{ userinfo.username }}--{{ userinfo.age }}</p>
  <p><button @click="addAge">age++</button></p>
  <hr />
  <ul>
    <li v-for="item in nameArr" :key="item.id">{{ item.id }}---{{ item.name }}</li>
  </ul>
  <p><button @click="addweapon">添加兵器</button></p>
  <hr />
  <p @click="addnum">num:{{ num }}</p>

  <!-- 
    知识点1:
     setup 组合式api 中没有this, this为undefined, 所有的数据和方法不再绑定到当前组件实例上,
     使用ref 语法 将数据代理, 语法: ref(数据), 这时候访问数据 使用 const 变量名= ref(数据)
     使用 变量名.value 该值就是一个响应式的数据值

    知识点2: 
    在temolate模板中使用响应式数据的时候, 需要在setup 函数将定义的数据和方法return 出去,这样才能访问到该数据和方法

    知识点3: 
    在template 中使用响应式数据,直接只用,不需要.value, 在template 中自动解包

    知识点4: 
    ref(数据) 处理响应式数据,该数据可以是基本数据类型还可以是复杂数据类型的任意数据

   -->

</template>
<script>
// 引入ref 函数, 用来数据处理成响应式数据 (注意: 主要用来处理基本类型的数据)
import { ref } from 'vue';
export default {
  // data() {
  //   return {
  //     //选项式的语法  该位置定义的是响应式的数据
  //   }
  // }
  setup() {

    // console.log(this); // undefined
    // 01: cout 为响应式数据
    const count = ref(0)
    // console.log(count);
    // 02: 需要将count变量return 出去

    // 03:定义一个方法, 然后将该方法在return 出去

    // 04: 使用ref处理复杂数据类型数据
    const userinfo = ref({ username: '张三', age: 20 })
    console.log('userinfo', userinfo);
    const add = () => {
      count.value++
    }

    const addAge = () => {
      userinfo.value.age++
    }

    // 05: 使用ref 这个响应函数处理数组
    const nameArr = ref([{ id: 0, name: "倚天剑" }, { id: 1, name: "屠龙刀" }])
    const addweapon = () => {
      nameArr.value.push({
        id: 3,
        name: "金箍棒"
      })
    }

    // 06: 不使用ref 包裹数据
    let num = ref(100)
    const addnum = () => {
      num.value++
      console.log(num);
    }
    return {
      count,
      add,
      userinfo,
      addAge,
      nameArr,
      addweapon,
      num,
      addnum
    }
  }
}

</script>
